<template>
  <div class="comment_page">
    <!-- 评论 -->
    <div class="comment_main">
      <img src="~@/assets/images/page/comment_title.png" alt="" class="comment_title">
      <div class="comment_swiper">
        <!-- banner轮播 -->
        <div class="swiper-container" id="mySwiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(banner, index) in banner" :key="index">
              <div class="comment-item">
                <img class="avatar" :src="banner.imgUrl" alt="avatar" />
                <div class="comment-info">
                  <div class="comment-info_top">
                    <div class="comment-info_name">{{banner.name}}</div>
                    <div class="comment-info_address">{{banner.address}}</div>
                    <el-rate v-model="banner.rate"></el-rate>
                  </div>
                  <div class="comment-info_message">{{banner.message}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="custom-pagination">
          <div
            v-for="(banner, idx) in visibleThumbs"
            :key="idx + thumbStart"
            :class="['pagination-thumb', { active: (idx + thumbStart) === activeIndex }]"
            @click="goToSlide(idx + thumbStart)"
          >
            <img :src="banner.imgUrl" alt="thumb" />
          </div>
          <div class="num_length">{{banner.length > 99 ? '99+' : banner.length}}</div>
        </div>
      </div>
    </div>
    <!-- 折扣优惠 -->
    <div class="show_footer">
      <div class="show_info">
        <div class="discount-title">
          <span>ENJOY</span>
          <span>A DISCOUNT</span>
        </div>
        <div class="discount-number">
          25%
          <span class="discount-EN">OFF</span>
        </div>
        <div class="discount-desc">
          Get 25% OFF your first order and enjoy exclusive discounts and news throughout the year when you opt-in to the Rogue newsletter.
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Swiper from 'swiper';
import 'swiper/css/swiper.min.css';
export default {
  data(){
    return{
      banner:[
        { 
          imgUrl: require('@/assets/images/page/photo.png'),
          name:'JAKE M',
          address:'CICERO,NY',
          rate:4,
          message:'“ best pouches i have tried! they feel great in the mouth and have excellent flavor.they last long too!  ” '
        },
        { 
          imgUrl: require('@/assets/images/page/photo1.png'),
          name:'ANDREW W',
          address:'SAN DIEGO,CA',
          rate:4,
          message:'“ my favorite flavor! l ve tried them all , but honeylemon is best .'
        },
        { 
          imgUrl: require('@/assets/images/page/photo2.png'),
          name:'KIWI T',
          address:'CICERO,NY',
          rate:4,
          message:'“ best pouches i have tried! they feel great in the mouth and have excellent flavor.they last long too! ” '
        },
        { 
          imgUrl: require('@/assets/images/page/photo3.png'),
          name:'JSON L',
          address:'CICERO,NY',
          rate:4,
          message:'“ my favorite flavor! l ve tried them all , but honeylemon is best .” '
        },
        { 
          imgUrl: require('@/assets/images/page/photo4.png'),
          name:'ANDI H',
          address:'SAN DIEGO,CA',
          rate:4,
          message:'“ best pouches i have tried! they feel great in the mouth and have excellent flavor.they last long too! ” '
        },
        { 
          imgUrl: require('@/assets/images/page/photo5.png'),
          name:'YAMA H',
          address:'SAN DIEGO,CA',
          rate:4,
          message:'“ my favorite flavor! l ve tried them all , but honeylemon is best .'
        }
      ],
      mySwiper: null,
      activeIndex: 3,
      thumbStart: 0, // 当前分页器起始索引
      thumbCount: 5, // 分页器最多显示数量
    }
  },
  computed: {
    visibleThumbs() {
      return this.banner.slice(this.thumbStart, this.thumbStart + this.thumbCount);
    }
  },
  mounted(){
    this.initSwiper()
  },
  methods:{
    initSwiper() {
      this.mySwiper = new Swiper('#mySwiper', {
        direction: 'vertical',
        slidesPerView: 3, //显示三个，宽度平分
        centeredSlides: true, // active slide 居中设置（默认居左）
        centeredSlidesBounds: true, // 主要是为了让第一个贴边（赠送最后一个贴合边缘）
        loop: true, // 循环
        autoplay: {
          delay: 5000,
          disableOnInteraction: false
        },
        pagination: {
          el: '.swiper-pagination', // 分页器
          clickable: true,
        },
        on: {
          slideChange: () => {
            this.$nextTick(()=>{
              this.adjustThumbStart();
            })
          },
          slideChangeTransitionEnd:()=>{
            this.$nextTick(()=>{
              this.activeIndex = this.mySwiper.realIndex;
              this.adjustThumbStart();
            })
          }
        }
      });
    },
    goToSlide(idx) {
      if (this.mySwiper) {
        this.mySwiper.slideToLoop(idx);
        this.activeIndex = idx;
        this.adjustThumbStart();
      }
    },
    adjustThumbStart() {
      // 保证activeIndex始终在分页器中间（除非在头尾）
      if (this.banner.length <= this.thumbCount) {
        this.thumbStart = 0;
        return;
      }
      let min = 0;
      let max = this.banner.length - this.thumbCount;
      let mid = Math.floor(this.thumbCount / 2);
      if (this.activeIndex <= mid) {
        this.thumbStart = 0;
      } else if (this.activeIndex >= max + mid) {
        this.thumbStart = max;
      } else {
        this.thumbStart = this.activeIndex - mid;
      }
    },
  }
}
</script>
<style lang="scss" scoped>
.comment_page{
  width: 100%;
  position: relative;
  .comment_main{
    width: 100%;
    height: 593px;
    background: url('~@/assets/images/page/comment_bg.png') no-repeat;
    background-size: cover;
    .comment_title{
      width: 355px;
      height: 51px;
      position: absolute;
      top: 41px;
      left: 50%;
      transform: translate(-50%,0);
    }
    .comment_swiper{
      position: absolute;
      top: 130px;
      left: 50%;
      transform: translate(-50%,0);
      height: 240px; // 153px * 3
      .swiper-container {
        width: 100%;
        height: 100%;
        position: relative;
      }
      .swiper-wrapper {
        width: 100%;
        height: 100%;
      }
      .swiper-slide{
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        box-shadow: none;
        padding: 0;
      }
      .comment-item {
        display: flex;
        align-items: center;
        border-radius: 15px;
        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
        padding: 20px 0;
        width: 290px;
        height: 90px;
        box-sizing: border-box;
        .comment-info{
          width: 65%;
          .comment-info_top{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .comment-info_name{
              color: #000000;
              font-size: 14px;
              font-weight: 600;
            }
            .comment-info_address{
              color: #BFBFBF;
              font-size: 8px;
            }
          }
          .comment-info_message{
            color: #000000;
            font-size: 12px;
            line-height: 12px;
            margin-top: 13px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient: vertical;
          }
        }
      }
      
      .avatar {
        width: 66px;
        height: 66px;
        border-radius: 50%;
        background: #f2f2f2;
        margin-left: 20px;
        object-fit: cover;
        margin-right: 19px;
      }
      .custom-pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 39px;
        position: relative;
        .num_length{
          width: 28px;
          height: 28px;
          border-radius: 50%;
          background: #F7F7F7;
          text-align: center;
          line-height: 28px;
          font-size: 15px;
          color: #DDDDDD;
          position: absolute;
          top: 0;
          right: -15px;
          z-index: 100;
        }
        .pagination-thumb {
          width: 59px;
          height: 59px;
          border-radius: 50%;
          overflow: hidden;
          box-sizing: border-box;
          opacity: 0.6;
          transition: all 0.2s;
          cursor: pointer;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
          }
          &.active {
            width: 78px;
            height: 78px;
            box-shadow: 0 4px 16px 0 rgba(31, 38, 135, 0.18);
            opacity: 1;
            z-index: 1;
          }
        }
      }
    }
  }
}
.show_footer{
  width: 100%;
  height:77px;
  background: #FFE46F;
  position: relative;
  .show_info {
    width: 334px;
    height: 141px;
    background: #F9F9F9;
    border-radius: 10px;
    position: relative;
    position: absolute;
    top: -63px;
    left: 50%;
    transform: translate(-50%,0);
    padding: 16px 17px;
    box-sizing: border-box;
    position: relative;
    .discount-title {
      font-size: 22px;
      font-weight: bold;
      color: #ffe066;
      font-style: italic;
      margin-bottom: 10px;
      line-height: 1.1;
      span{
        display: inline-block;
        width: 100%;
      }
    }
    .discount-desc {
      font-size: 12px;
      color: #000000;
      border-top: 2px solid #000000;
      padding-top: 12px;
      font-family: 'Arial', sans-serif;
    }
    .discount-number{
      position: absolute;
      font-size: 50px;
      color: #000000;
      font-weight: bold;
      right: 15px;
      top: 13px;
      .discount-EN{
        display: inline-block;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        font-size: 8px;
        color: #ffffff;
        text-align: center;
        line-height: 24px;
        background: #FFE46F;
        float: right;
        margin-top: -3px;
      }
    }
  }
  

}
::v-deep .swiper-slide{
  &.swiper-slide-active{
    .comment-item {
      width: 334px!important;
      height: 93px!important;
      background: #F7F7F7!important;
      position: relative!important;
      z-index: 50!important;
      padding-right:20px!important;
      box-sizing: border-box;
    }
    .comment-info{
      flex: 1!important;
    }
    .avatar {
      margin-left: 20px!important;
    }
  }
  &.swiper-slide-prev{
    .comment-item {
      width: 287px!important;
      height: 80px!important;
      background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
      opacity: 0.8;
      .comment-info_name{
        font-size: 10px!important;
      }
      .comment-info_message{
        font-size: 10px!important;
        margin-top: 5px!important;
      }
      .comment-info_address{
        font-size: 6px!important;
      }
    }
    .avatar {
      width: 53px!important;
      height: 53px!important;
      margin-right: 12px!important;
    }
  }
  &.swiper-slide-next{
    .comment-item {
      width: 287px!important;
      height: 80px!important;
      background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
      opacity: 0.8;
      .comment-info_name{
        font-size: 10px!important;
      }
      .comment-info_message{
        font-size: 10px!important;
        margin-top: 5px!important;
      }
      .comment-info_address{
        font-size: 6px!important;
      }
    }
    .avatar {
      width: 53px!important;
      height: 53px!important;
      margin-right: 12px!important;
    }
  }
}
::v-deep .el-rate{
  display: flex!important;
  align-self: center!important;
}
::v-deep .el-rate__icon{
  font-size: 12px!important;
  margin-right:0px!important;
  margin-top: 3px!important;
}
</style>